import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/province/anhui.js';
//  地图数据
const mapData = [
  { name: "宣城", value: "0.8" },
  { name: "芜湖", value: "6.6" },
  { name: "蚌埠", value: "1.7" },
  { name: "池州", value: "1.3" },
  { name: "滁州", value: "1.1" },
  { name: "安庆", value: "1.2" },
  { name: "马鞍山", value: "1.4" },
  { name: "淮南", value: "3.0" },
  { name: "亳州", value: "0.5" },
  { name: "六安", value: "2.5" },
  { name: "淮北", value: "1.0" },
  { name: "黄山", value: "1.1" },
  { name: "宿州", value: "1.0" },
  { name: "阜阳", value: "1.9" },
  { name: "合肥", value: "17.1" },
  { name: "铜陵", value: "1.2" },
]

export const mapOptions = (params) => ({
  title: {
    show: false,
    text: '全国物流输送图',
    left: 'center',
    textStyle: {
      color: '#fff',
    },
  },
  legend: {
    show: false,
  },
  tooltip: {
    trigger: 'item',
    zIndex: 400,
    axisPointer: {
      type: 'shadow',
      show: true,
      label: {
        color: '8C8C8C',
        fontWeight: '600',
        fontSize: '12px',
        backgroundColor: 'transparent'
      },
      shadowStyle: {
        color: '#f8f8f9'
      }
    },
    extraCssText: 'z-index:10;',
    backgroundColor: 'rgba(0, 0, 0,.5)',
    borderColor: 'rgba(0, 0, 0,.5)',
    shadowColor: 'rgba(0,0,0,.1)',
    borderWidth: 0,
    padding: 0,
    formatter: function (params) {
      // 由于是写在最外层的所以需要判断一下当前鼠标是在地图上还是散点上悬浮
      // console.log('parms', params)
      let AreaName = params.name
      var str = `<div style = "background: rgba(0,0,0,0.3);height:159px;width:298px;color:#FFFFFF;">
      <div style="padding-left:11px;padding-top:4px">${AreaName}</div>      
     </div>`
      return str
    },
  },
  series: [
    {
      name: '安徽',
      type: 'map',
      zoom: 1.2,
      mapType: '安徽',
      hoverable: true,
      selectedMode: 'single', // 同时只能一块区域变色
      zlevel: 2,
      rippleEffect: {
        brushType: 'stroke',
      },
      label: {
        emphasis: {
          show: true,
          position: 'right',
          formatter: '{b}',
        },
      },
      symbolSize: 2,
      showEffectOn: 'render',
      itemStyle: {
        normal: {
          borderColor: '#1DFFFF', //区域边框颜色
          areaColor: '#398FFF', //区域颜色
          borderWidth: 0.5, //区域边框宽度
          shadowBlur: 5,
          shadowColor: 'rgba(107,91,237,.7)',
        },
        emphasis: {
          borderColor: '#FFD1A3',
          areaColor: 'white',
          borderWidth: 1,
          shadowBlur: 5,
          shadowColor: 'white',
        },
      },
      data: mapData,
    }
  ],
});
